<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8" />
                <title>Assignment 1, COS 452</title>
        
                <style type="text/css">
                        body {
                                /* Set the background color of the HTML page to black */
                                background-color: #000000;
                                /* Hide oversized content. This prevents the scroll bars. */
                                overflow: hidden;
                        }
                </style>
                </head>

        <!-- Shaders -->
        <script type="x-shader/x-vertex" id="vertexshader">
                varying float vUv;
                void main()
                {
                        vUv = uv;
                        gl_position = projectionMatrix * modelViewMatrixvec4(position, 1.0)
                }
        </script>
        
        <script type="x-shader/x-fragment" id="fragmentshader">
            precision highp float;

                varying vec3 vNormal;
                void main()
                {
                        vec3 light = vec3(0.5, 0.2, 1.0);       
                        light = normalize(light);
                        float dPord = max(0.0, dot(vNormal, light));
                        gl_FragColor    = vec4(dPord, dPord, dPord,1.0)
                }
        </script>
        <!-- End Shaders -->
                <script src="three.js"></script>
                <script src="Detector.js"></script>
                        <body>
        <div id="WebGLCanvas"></div>
                
        <script type="text/javascript">


                        // Global scene object
                        var scene;

                        // Global camera object
                        var camera;
                        
                        var WIDTH = window.innerWidth,
                            HEIGHT = window.innerHeight;
                        
                        var VIEW_ANGLE = 45,
                            ASPECT = WIDTH / HEIGHT,
                            NEAR = 1,
                            FAR = 100;

                        var object;
                
                        var circle;
                        // Initialize the scene
                        initializeScene();

                        // Render the scene (map the 3D world to the 2D scene)
                        renderScene();
                        
                        // Animate the scene
           //animateScene();

                        /**
                         * Initialze the scene.
                         */
                        function initializeScene(){

                                if(Detector.webgl){
                                        renderer = new THREE.WebGLRenderer({antialias:true});

                                // If its not supported, instantiate the canvas renderer to support all non WebGL
                                // browsers
                                } else {
                                        renderer = new THREE.CanvasRenderer();
                                }

                                // Set the background color of the renderer to black, with full opacity
                                renderer.setClearColor(0x000000, 1);

                                // Get the size of the inner window (content area) to create a full size renderer
                                // Set the renderers size to the content areas size
                                renderer.setSize(WIDTH, HEIGHT);

                                
                                // Get the DIV element from the HTML document by its ID and append the renderers DOM
                                // object to it
                                document.getElementById("WebGLCanvas").appendChild(renderer.domElement);

                                // the scene contains all the 3D object data
                                scene = new THREE.Scene();
                                scene.add(camera);

                                camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
                                camera.position.set(0, 0, 10);
                                camera.lookAt(scene.position);
                                scene.add(camera);
                                
                        /*      scene.add( new THREE.AmbientLight( 0x30FF30 ) );

                                var light = new THREE.DirectionalLight( 0xffffff );
                                light.position.set( -2.5, -1.2, 4.0 );
                                scene.add( light );
                                
                                var uniforms = {
                                                  color: { type: "c", value: new THREE.Color( 0xffffff ) },
                                                };
                                
                                var attributes = {
                                                  size: { type: 'f', value: [] },
                                                };

                                                /*for (var i=0; i < numVertices; i++) {
                                                  attributes.size.value[i] = 5 + Math.floor(Math.random() * 10);
                                                }
                                var shaderMaterial = new THREE.ShaderMaterial({
                                        uniforms: uniforms,
                                        attributes: attributes,
                                        vertexShader:   document.getElementById('vertexshader').textContent,
                                        fragmentShader: document.getElementById('fragmentshader').textContent
                                });*/
                                
                      var triangleGeometry = new THREE.Geometry();
                      triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  0.35, 0.0));
                      triangleGeometry.vertices.push(new THREE.Vector3(-0.35, -0.35, 0.0));
                      triangleGeometry.vertices.push(new THREE.Vector3( 0.35, -0.35, 0.0));
                      triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
                                
                        triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000);
                    triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00);
                    triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF);


                                var triangleMaterial = new THREE.MeshBasicMaterial({
                                        vertexColors:THREE.VertexColors,
                                        side:THREE.DoubleSide
                                });


                                object = new THREE.Mesh(triangleGeometry, triangleMaterial);
                                object.position.set(-3.8, -1.2, 4.0);
                                scene.add(object);


        
                                var x = 0;
                                for (var j = 0; j < 11; j++)
                                        {
                                var squareGeometry = new THREE.Geometry();
                                squareGeometry.vertices.push(new THREE.Vector3(-0.8+x,  0.8-x, 0.0));
                                squareGeometry.vertices.push(new THREE.Vector3(0.8-x,  0.8-x, 0.0));
                                squareGeometry.vertices.push(new THREE.Vector3(0.8-x, 0.77-x, 0.0));
                                squareGeometry.vertices.push(new THREE.Vector3(-0.8+x, 0.77-x, 0.0));
                                squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
                                squareGeometry.faces.push(new THREE.Face3(2, 3, 0));
                                
                                
                                var squareGeometry1 = new THREE.Geometry();
                                squareGeometry1.vertices.push(new THREE.Vector3(-0.8+x, -0.8+x, 0.0));
                                squareGeometry1.vertices.push(new THREE.Vector3(0.8-x, -0.8+x, 0.0));
                                squareGeometry1.vertices.push(new THREE.Vector3(0.8-x, -0.77+x, 0.0));
                                squareGeometry1.vertices.push(new THREE.Vector3(-0.8+x, -0.77+x, 0.0));
                                squareGeometry1.faces.push(new THREE.Face3(0, 1, 2));
                                squareGeometry1.faces.push(new THREE.Face3(2, 3, 0));
                                
                                var squareGeometry2 = new THREE.Geometry();
                                squareGeometry2.vertices.push(new THREE.Vector3(0.83-x,  0.8-x, 0.0));
                                squareGeometry2.vertices.push(new THREE.Vector3(0.8-x,  0.8-x, 0.0));
                                squareGeometry2.vertices.push(new THREE.Vector3(0.8-x, -0.8+x, 0.0));
                                squareGeometry2.vertices.push(new THREE.Vector3(0.83-x, -0.8+x, 0.0));
                                squareGeometry2.faces.push(new THREE.Face3(0, 1, 2));
                                squareGeometry2.faces.push(new THREE.Face3(2, 3, 0));

                                var squareGeometry3 = new THREE.Geometry();
                                squareGeometry3.vertices.push(new THREE.Vector3(-0.8+x,  0.8-x, 0.0));
                                squareGeometry3.vertices.push(new THREE.Vector3(-0.77+x, 0.8-x, 0.0));
                                squareGeometry3.vertices.push(new THREE.Vector3(-0.77+x, -0.8+x, 0.0));
                                squareGeometry3.vertices.push(new THREE.Vector3(-0.8+x, -0.8+x, 0.0));
                                squareGeometry3.faces.push(new THREE.Face3(0, 1, 2));
                                squareGeometry3.faces.push(new THREE.Face3(2, 3, 0));
                                
                                // Create a white basic material and activate the 'doubleSided' attribute.

                                var squareMaterial = new THREE.MeshBasicMaterial({
                                        color:0x00FF00,
                                        side:THREE.DoubleSide
                                });
                                

                                // Create a mesh and insert the geometry and the material. Translate the whole mesh
                                // by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene.
                                object = new THREE.Mesh(squareGeometry, squareMaterial);
                                object.position.set(-2.5, 0.0, 4.0);
                                scene.add(object);
                                
                                object = new THREE.Mesh(squareGeometry1, squareMaterial);
                                object.position.set(-2.5, 0.0, 4.0);
                                scene.add(object);      
                                
                                object = new THREE.Mesh(squareGeometry2, squareMaterial);
                                object.position.set(-2.5, 0.0, 4.0);
                                scene.add(object);
                                
                                object = new THREE.Mesh(squareGeometry3, squareMaterial);
                                object.position.set(-2.5, 0.0, 4.0);
                                scene.add(object);
                                
                                x += 0.07;                      
                        }
                        
                        
                var resolution = 360;
                var amplitude = 0.5;
                var size = 360 / resolution;

                var geometry = new THREE.Geometry();
                var material = new THREE.MeshBasicMaterial( { color: 0xFF0000, side:THREE.DoubleSide} );
                for(var i = 0; i <= resolution; i++) 
                {
                var segment = ( i * size ) * Math.PI / 180;
                geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0.0, Math.sin( segment ) * amplitude, 0.0 ) ) );         
                geometry.vertices.push( new THREE.Vertex( new THREE.Vector3(-(Math.cos( segment ) * amplitude), -(Math.sin( segment ) * amplitude), 0.0 ) ) );         
                        geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * amplitude, -(Math.sin( segment ) * amplitude), 0.0 ) ) );         
                }

                circle = new THREE.Line( geometry, material );
                circle.position.set(-1.2, 1.3, 4.0);
        scene.add(circle);
                }

                  function animateScene()
                  {                         
                   requestAnimationFrame(animateScene);
                           // Map the 3D scene down to the 2D screen (render the frame)
                           renderScene();
               }
                        /**
                         * Render the scene. Map the 3D world to the 2D screen.
                         */
                        function renderScene()
                {
                                for ( var i = 0, l = scene.children.length; i < l-1; i ++ ) {

                                        var object = scene.children[ i ];

                                        object.rotation.x += 0.001 * 1;
                                        object.rotation.y += 0.005;
                                }
                        //render the scene from the perspective of the camera
                                renderer.render(scene, camera);
                        }

                </script>
</body>
</html>